<template>
  <div class="channel-container with-top-padding">
  <div class="column">
      <div v-for="(image, index) in leftImages" :key="index" class="image-container" @click="image.id !== undefined && goToVideoPage(image.id)"> <!-- 修改点击事件 -->
        <h2 class="image-title">{{ image.title }}</h2>
        <img :src="image.src" :alt="image.title">
      </div>
    </div>
    <div class="column">
      <div v-for="(image, index) in rightImages" :key="index" class="image-container" @click="image.id !== undefined && goToVideoPage(image.id)"> <!-- 修改点击事件 -->
        <h2 class="image-title">{{ image.title }}</h2>
        <img :src="image.src" :alt="image.title">
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router'; // 导入路由钩子
import '../assets/Channel.css';

const router = useRouter();

// 重新定义图片数据，添加 id 字段并修改标题
const images = [
  { id: 5, src: 'https://codelover.club/coursefiles/images/film/创意.jpeg', title: '创意' },
  { id: 6, src: 'https://codelover.club/coursefiles/images/film/剧情.jpeg', title: '剧情' },
  { id: 7, src: 'https://codelover.club/coursefiles/images/film/动画.jpeg', title: '动画' },
  { id: 8, src: 'https://codelover.club/coursefiles/images/film/励志.jpeg', title: '励志' },
  { id: 9, src: 'https://codelover.club/coursefiles/images/film/实验.jpeg', title: '实验' },
  { id: 10, src: 'https://codelover.club/coursefiles/images/film/广告.jpeg', title: '广告' },
  { id: 11, src: 'https://codelover.club/coursefiles/images/film/搞笑.jpeg', title: '搞笑' },
  { id: 12, src: 'https://codelover.club/coursefiles/images/film/旅行.jpeg', title: '旅行' },
  { id: 13, src: 'https://codelover.club/coursefiles/images/film/时尚.jpeg', title: '时尚' },
  { id: 14, src: 'https://codelover.club/coursefiles/images/film/汽车.jpeg', title: '汽车' },
  { id: 15, src: 'https://codelover.club/coursefiles/images/film/混剪.jpeg', title: '混剪' },
  { id: 16, src: 'https://codelover.club/coursefiles/images/film/游戏.jpeg', title: '游戏' },
  { id: 17, src: 'https://codelover.club/coursefiles/images/film/爱情.jpeg', title: '爱情' },
  { id: 18, src: 'https://codelover.club/coursefiles/images/film/生活.jpeg', title: '生活' },
  { id: 19, src: 'https://codelover.club/coursefiles/images/film/科幻.jpeg', title: '科幻' },
  { id: 20, src: 'https://codelover.club/coursefiles/images/film/纪录.jpeg', title: '纪录' },
  { id: 21, src: 'https://codelover.club/coursefiles/images/film/美食.jpeg', title: '美食' },
  { id: 22, src: 'https://codelover.club/coursefiles/images/film/运动.jpeg', title: '运动' },
  { id: 23, src: 'https://codelover.club/coursefiles/images/film/音乐.jpeg', title: '音乐' },
  { id: 24, src: 'https://codelover.club/coursefiles/images/film/预告.jpeg', title: '预告' },
];

// 分割图片数据到左右两栏
const leftImages = ref(images.slice(0, Math.ceil(images.length / 2)));
const rightImages = ref(images.slice(Math.ceil(images.length / 2)));

// 定义跳转方法
const goToVideoPage = (id: number) => {
  router.push({ name: 'VideoPlayer', params: { id } });
};
</script>

<style scoped>
.channel-container {
  display: flex;
  justify-content: space-between;
}

/* 添加新的样式 */
.with-top-padding {
  padding-top: 80px; /* 根据导航栏的实际高度调整 */
}

.column {
  flex: 1;
  padding: 10px;
}

.image-container {
  position: relative;
  margin-bottom: 20px;
}

.image-container img {
  width: 100%;
  height: auto;
}

.image-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin: 0;
}
</style>